<template>
    <div>
      <!-- 搜索表单 -->
      <div style="margin-bottom:20px;">
        <el-input style="width:240px" placeholder="请输入书籍书号" v-model="number"></el-input>
        <el-input style="width:240px;margin-left: 5px;" placeholder="请输入书籍名称" v-model="name"></el-input>
        <el-select style="width:240px;margin-left: 5px;" v-model="kind_id" placeholder="请选择书籍种类">
          <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.type"
          :value="item.id">
          </el-option>
        </el-select>
        <el-button style="margin-left:5px;" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
        <el-button style="margin-left:5px;" type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
        <el-button style="margin-left:5px;" type="success" @click="addBook"><i class="el-icon-plus"></i>添加书籍</el-button>
      </div>
  
      <!-- 为网格加网线 -->
      <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="编号" v-show="false"></el-table-column>
        <el-table-column prop="number" label="书号"></el-table-column>
        <el-table-column prop="name" label="书籍名称"></el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="pub" label="出版社"></el-table-column>
  
        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- scope.row就是当前行数据 -->
            <el-button type="primary" @click="editBook(scope.row.id)"><i class="el-icon-edit">编辑</i></el-button>
            <el-popconfirm
                title="您确定删除这行数据吗吗？"
                @confirm="delBook(scope.row.id)"
                style="margin-left:5px"
              >
                <el-button type="danger" slot="reference"><i class="el-icon-delete">删除</i></el-button>
              </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
  
      <!-- 新增弹窗 -->
      <Dialog
          :title="dialog.title"
          :visible="dialog.visible"
          :width="dialog.width"
          :height="dialog.height"
          @onClose="onClose"
      >
          <div slot="content">
              <AddBookList
              @onClose="onClose"
              @onConfirm="onConfirm"
              @load="load"
              :options="options">
              </AddBookList>
          </div>
      </Dialog>
  
      <!-- 编辑弹窗 -->
      <Dialog
        :title="dialog.title"
        :visible="dialog.editVisible"
        :width="dialog.width"
        :height="dialog.height"
        @onClose="onClose"
        @onCloseEdit="onCloseEdit"
    >
        <div slot="content">
            <EditBookList
            @onClose="onCloseEdit"
            @onConfirm="onConfirmEdit"
            :id="dialog.id"
            :options="options"
            :ts="dialog.ts"
            @load="load">
            </EditBookList>
        </div>
    </Dialog>
    </div>
  </template>
  
  <script>
  import request from '@/utils/request'
  import Dialog from '@/components/dialog/Dialog.vue'
  import AddBookList from '@/components/dialog/AddBookList.vue'
  import EditBookList from '@/components/dialog/EditBookList.vue'
  
  export default {
    name: 'Book',
    components:{
      AddBookList,
      Dialog,
      EditBookList
    },
    data(){
      return {
        // 弹框属性
        dialog:{
          ts:'',
          id:'',
          title:'',
          visible:false,
          editVisible:false,
          width:630,
          height:200
        },
        tableData:[],
        total:0,
        pageNo:1,
        pageSize:5,
        number:'',
        name:'',
        options: [],
        kind_id:'',
        show:false
      }
    },
    mounted(){
      this.getAllKind()
      this.load()
    },
    methods:{
      getAllKind(){
        request.get('/api/page/workbench/kind/searchall.do').then(res=>{
          this.options=res.kinds
        })
      },
      load(){
        request.get('/api/page/workbench/book/search.do',{
          params:{
            number:this.number,
            name:this.name,
            kind_id:this.kind_id,
            pageNo:this.pageNo,
            pageSize:this.pageSize
          }
        }).then(res=>{
          this.tableData=res.books
          this.total=res.total
        })
      },
      reset(){
        this.pageNo=1
        this.pageSize=this.pageSize
        this.number=''
        this.name=''
        this.kind_id=''
        this.load()
      },
      handleSizeChange(pageSize){
        // 改变页面大小按钮触发分页 pageSize是页面大小
        // console.log(pageSize)
        this.pageSize=pageSize
        this.load()
      },
      handleCurrentChange(pageNo){
        // 改变当前页数按钮触发分页 pageNo是当前页数
        // console.log(pageNo)
        this.pageNo=pageNo
        this.load()
      },
      // 新增按钮
      addBook(){
          // 设置弹框属性
          this.dialog.title='新增书籍'
          // 弹出对话框
          this.dialog.visible=true
      },
      // 编辑按钮
      editBook(id){
          // 设置弹框属性
          this.dialog.title='编辑书籍'
          this.dialog.id=id
          this.dialog.ts=new Date().valueOf() // 获取时间戳
          // 弹出对话框
          this.dialog.editVisible=true
          this.load()
      },
      // 弹框关闭
      onClose(){
          this.dialog.visible=false
      },
      // 弹框确定
      onConfirm(){
          this.dialog.visible=false
      },
      // 编辑弹框关闭
      onCloseEdit(){
          this.dialog.editVisible=false
      },
      // 编辑弹框确定
      onConfirmEdit(){
          this.dialog.editVisible=false
      },
      // 确认删除
      delBook(id){
        request.post('/api/page/workbench/book/del.do',{
              id:id
          }).then(res=>{
              if(res.code==="1"){
                  this.$notify.success('删除成功')
                  this.load()
              }else{
                  this.$notify.error(res.message)
              }
          })
      }
    }
  }
  </script>
  
  <style>
  
  </style>